<template>
  <el-card style="margin-bottom: 10px">
    <vxe-form
      ref="formRef"
      :data="props.formData"
      custom-layout
      size="mini"
      v-bind="$attrs"
      @submit="submitEvent"
      @reset="resetEvent"
      @collapse="collapseEvent"
    >
      <template v-for="(item, index) in props.formItems" :key="item.field + index">
        <vxe-form-item :title="item.title" :field="item.field" :folding="item.folding" :item-render="{}">
          <template v-if="item.handleType === 'custom'" #default="data">
            <slot :name="item.slotName" v-bind="data" :items="item" />
          </template>
          <template v-else #default="{ data }">
            <component
              :is="item.component"
              :key="item.field + index"
              v-model.trim="data[item.field]"
              :placeholder="item.placeholder || ''"
              :options="item.options"
              :size="item.size || 'mini'"
              :clearable="item.clearable || true"
              :type="item.type"
              :ref="item.field"
              :multiple="item.multiple || false"
              :style="{ width: item.width || '170px' }"
              :valueFormat="item.format"
            />
          </template>
        </vxe-form-item>
      </template>

      <vxe-form-item v-if="props.isShowSearch" :collapse-node="isShowCollapse" :item-render="{}">
        <template #default>
          <vxe-button type="submit" icon="vxe-icon-search" size="mini" status="primary">{{ $t('搜索') }}</vxe-button>
          <vxe-button type="reset" icon="vxe-icon-repeat" size="mini">{{ $t('重置') }}</vxe-button>
        </template>
      </vxe-form-item>
    </vxe-form>
  </el-card>
</template>

<script setup>
import { $t } from '@/languages/index'
const props = defineProps({
  formData: {
    type: Object,
    required: true
  },
  submitEvent: {
    type: Function,
    default: () => {}
  },
  resetEvent: {
    type: Function,
    default: () => {}
  },
  formItems: {
    type: Array,
    required: true
  },
  isShowSearch: {
    type: Boolean,
    default: true
  }
})

const isShowCollapse = ref(false)
props.formItems.some(item => {
  if (item.folding) {
    isShowCollapse.value = true
    return true
  }
  return false
})
const emit = defineEmits(['collapse'])

const collapseEvent = () => {
  emit('collapse')
}
</script>
